/**
 * 表格操作 2016-12-29 Juliana
 */
(function (W, doc) {
    "use strict";
    W.tbOption = {
        _getStyle: function (dom, attr) {
            return (dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr]);
        },
        _myAddEvent: function (obj, ev, fn) {
            if (obj.attachEvent) {
                obj.attachEvent("on" + ev, fn);
            }
            else {
                obj.addEventListener(ev, fn, false);
            }
        },
        _appendHTML: function (o, html) {
            var divTemp = document.createElement("div"), nodes = null
                , fragment = document.createDocumentFragment();
            divTemp.innerHTML = html;
            nodes = divTemp.childNodes;
            for (var i = 0, length = nodes.length; i < length; i += 1) {
                fragment.appendChild(nodes[i].cloneNode(true));
            }
            o.appendChild(fragment);
            nodes = null;
            fragment = null;
        },
        init: function (warp) {
            var that = this;
            that._appendHTML(doc.querySelector('body'), '<div class="out-fix-opts" style="display: none;"></div>');
            warp = warp || doc;
            var tbOpts = warp.querySelectorAll('.tb-opts');
            for (var i = 0; i < tbOpts.length; i++) {
                var tb = tbOpts[i];
                var opts = tb.querySelectorAll('.comm-opts a'),
                    cmOpt = tb.querySelector('.comm-opts'),
                    optsW = 0,//所有选项加起来的长度
                    tbW = tb.clientWidth - parseInt(that._getStyle(tb, 'paddingLeft')) - parseInt(that._getStyle(tb, 'paddingRight')),
                    showStr = "",//显示的html字符串
                    hideStr = "";//隐藏的html字符串

                for (var j = 0; j < opts.length; j++) {
                    var opt = opts[j];
                    optsW += opt.clientWidth;
                }
                if (optsW > tbW) {
                    //组装
                    var realW = 50;//所有选项加起来的实际长度
                    hideStr = '<div class="opt-more" href="#">' +
                        '<a class="more-btn" href="#"><span>更多</span><i class="more iconfont icon-unfold"></i></a>' +
                        '<ul class="options-content">';
                    for (var j = 0; j < opts.length; j++) {
                        var opt = opts[j];
                        realW += opt.clientWidth;
                        if (realW < tbW) {
                            showStr += opt.outerHTML;
                        } else {
                            hideStr += '<li>' + opt.outerHTML;
                            +'</li>';
                        }
                    }
                    hideStr += '</ul>' +
                        '</div>';
                    if (showStr !== '') {
                        cmOpt.innerHTML = showStr;
                    } else {
                        var _parentElement = cmOpt.parentNode;
                        if (_parentElement) {
                            _parentElement.removeChild(cmOpt);
                        }
                    }
                    if (showStr == '') {
                        hideStr = hideStr.replace('opt-more', 'opt-more before-none');
                        hideStr = hideStr.replace("更多", "操作");
                    }
                    tb.insertAdjacentHTML('beforeend', hideStr);

                    that._myAddEvent(tb.querySelector('.more-btn'), 'mouseover', function (e) {
                        var hideOpts = this.parentNode.querySelector('.options-content');
                        var ofixopts = doc.querySelector('.out-fix-opts'), moreH = this.scrollHeight, moreW = this.scrollWidth;
                        ofixopts.innerHTML = hideOpts.outerHTML;
                        var rect = this.getBoundingClientRect();
                        ofixopts.style.left = (rect.left - 50) + 'px';
                        ofixopts.style.top = (rect.bottom + window.scrollY) + 'px';
                        ofixopts.style.display = 'block';
                    });
                    that._myAddEvent(tb.querySelector('.more-btn'), 'mouseout', function (e) {
                        var ofixopts = doc.querySelector('.out-fix-opts');
                        ofixopts.style.display = 'none';
                    });
                    that._myAddEvent(doc.querySelector('.out-fix-opts'), 'mouseover', function (e) {
                        var ofixopts = doc.querySelector('.out-fix-opts');
                        ofixopts.style.display = 'block';
                    });
                    that._myAddEvent(doc.querySelector('.out-fix-opts'), 'mouseout', function (e) {
                        var ofixopts = doc.querySelector('.out-fix-opts');
                        ofixopts.style.display = 'none';
                    });
                }
            }
        }
    }
    tbOption.init();
}(window, document));
(function ($, W, doc) {
    "use strict";
    W.tableSel = {
        init: function () {
            var that = this;
            var tableSelWarps = doc.querySelectorAll('.j-table-sel-warp');
            $('body').append('<div class="out-fix-sel-wrap" style="display: none;"><div class="out-fix-shadow"></div><div class="out-fix-sel"></div></div>');
            var $fixSel = $('.out-fix-sel-wrap'),$selShadow =$fixSel.find('.out-fix-shadow');
            for (var i = 0; i < tableSelWarps.length; i++) {
                var tableSelWarp = tableSelWarps[i],
                    selText = tableSelWarp.querySelector('.sel-text'),
                    tableSel = tableSelWarp.querySelector('.j-table-sel'),
                    tableSelOpts = tableSelWarp.querySelectorAll('.j-table-sel li'),
                    activeOpt = tableSelWarp.querySelector('.j-table-sel li.active');
                //设置选择的文字
                if(!selText.innerText) {
                    selText.innerText = activeOpt ? activeOpt.innerText.trim() : '---';
                }
                tableSelWarp.addEventListener('click', function (e) {
                    var $selWrap = $(this),$fixSel = $('.out-fix-sel-wrap');
                    var $siblingSel = $selWrap.find('.j-table-sel'),$selFixCtn = $fixSel.find('.out-fix-sel');
                    $selFixCtn.html($siblingSel[0].outerHTML);
                    //偏移
                    var rect = this.getBoundingClientRect();
                    $selFixCtn.css('left',(rect.left) + 'px');
                    $selFixCtn.css('top',(rect.bottom + window.scrollY) + 'px');
                    $fixSel[0].setAttribute('data-id', $selWrap.data('id'));
                    $fixSel[0].setAttribute('data-name', $selWrap.data('name'));
                    $fixSel[0].setAttribute('data-change-text', $selWrap.data('changeText'));
                    $fixSel.show();
                    $fixSel.find('.out-fix-shadow').click(function (e) {
                        $fixSel.hide();
                    })
                });
            }
            //给选项绑定事件
            $fixSel.on('click','li',function (e) {
                var e = e || window.event;
                var elem = e.target || e.srcElement;
                //修改选择的文字
                var innerText = elem.innerText, value = elem.getAttribute('data-value'),
                    id = $fixSel[0].getAttribute('data-id'),
                    name = $fixSel[0].getAttribute('data-name'),
                    changeText = $fixSel[0].getAttribute('data-change-text');
                var $selWrap = $('.j-table-sel-warp[data-id="' + id + '"][data-name="' + name + '"]');
                if ($selWrap.length && changeText !== 'false') {
                    var $selText = $selWrap.find('.sel-text');
                    $selText.text(innerText);
                    $selText[0].setAttribute('data-value', value);
                }
                //设置active
                if(changeText !== 'false'){
                    $('.j-table-sel-warp[data-id="' + id + '"][data-name="'+name+'"] .active').removeClass('active');
                    $('.j-table-sel-warp[data-id="' + id + '"][data-name="'+name+'"]').find('li[data-value="' + value + '"]').addClass( 'active');
                    $fixSel.hide();
                }
                //执行onchange函数
                var evtFun = elem.getAttribute('onchange');
                eval('(function () { var data={id:"' + id + '",value:"' + value + '"};' + evtFun + '(data)})();');
            })
        }
    }

}(jQuery, window, document));